//<feature charts>
Ext.define('AkData.view.TerminGecikmeYuzdeleriHAFTALIK', {
    extend: 'Ext.Panel',
    requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom', 'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category', 'Ext.carousel.Carousel'],
    config: {
        //cls: 'card1',
		//layout: 'fit',
		//fullscreen: true,

		layout: 'vbox',
		
        items: [
            {
                xtype: 'toolbar',
                //cls: 'charttoolbar',
                top: 0,
                right: 0,
                zIndex: 50,
                style: {
                    background: 'none'
                },
				items: [
                    {
                        iconCls: 'refresh',
						style: {'background': '#E8E8E8', 'color': 'black'},
                        handler: function () {
							Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
							Ext.getStore('TerminGecikmeYuzdeleriHAFTALIK_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
                        }
                    },
				]
            },
			{
				flex: 1,
                xtype: 'chart',
                store: 'TerminGecikmeYuzdeleriHAFTALIK_Store',
                background: 'white',
				id: 'TerminGecikmeYuzdeleriHAFTALIK_ID',
                colors: AkData.view.ColorPatterns.getAlteredBaseColorsHSL({s: -0.1}),
				legend: {
					position: 'bottom',
				},
				
                series: [
                    {
                        type: 'bar',
                        xField: 'hafta',
                        yField: ['duzboyama', 'htboyama'],
						title: ['Düz Boyama', 'HT Boyama'],
                        stacked: false,
						style: {stroke: '#000000', /*maxBarWidth: 90*/},
						
						highlightCfg: {
							fillStyle: '#FFF',
						},
						
						label: {
							display: 'insideEnd', 
							field: ['duzboyama', 'htboyama'],
							
							//renderer: function (text) {
								////return Ext.util.Format.number(text, '0,000.00');
								//if (text % 2 == 0) {return '(' + text + ')'}
							//}
							
						}
                    }
                ],
				
				interactions: [
					{type: 'panzoom', /*zoomOnPanGesture: true*/}, //{type: 'itemhighlight'},
					//'panzoom', 'itemhighlight',
					{
						type: 'iteminfo',
						//bubbleEvents: 'Test',
						panel: {height: 200, items: [{docked: 'top', xtype: 'toolbar', title: 'Bilgi'}]},
						//{modal: true, centered: true, width: 250, height: 300, styleHtmlContent: true, scrollable: 'vertical', hideOnMaskTap: true, fullscreen: false, hidden: true, zIndex: 30, items: [{docked: 'top', xtype: 'toolbar', title: 'Item Detail'}]}
						listeners: {
							show: function(me, item, panel) {
								//panel.getDockedItems()[0].setTitle("Ayrıntılar.");
								//panel.setHtml('Düz Boyama: %' + item.record.get('duzboyama') + '<br \>' + 'HT Boyama: %' + item.record.get('htboyama'));
								panel.setHtml(
								'<ul>' + 
								'<li><b>Hafta: </b>' + item.record.get('hafta') + '</li>' + 
								'<li><b>Düz Boyama: </b>' + item.record.get('duzboyama') + '</li>' + 
								'<li><b>HT Boyama: </b> ' + item.record.get('htboyama') + '</li>' + 
								'</ul>');
							}
						}	
					}
				],
				
                axes: [
                    {
                        type: 'numeric',
                        position: 'left',
                        fields: ['duzboyama', 'htboyama'],
						grid: {
							odd: {opacity: 1, fill: '#ddd', stroke: '#bbb', lineWidth: 1}
						},
						//title: {text: 'Haftalık Üretimler', fontSize: 15}
                    },
                    {
                        type: 'category',
                        position: 'bottom',
                        fields: 'hafta',
						//visibleRange: [0, 0.1],
						//title: {text: 'Haftalar', fontSize: 15}
                    }
                ]
            },
			{
				//flex: 2,
                xtype: 'grid',
                store: 'TerminGecikmeYuzdeleriHAFTALIK_Store',
				titleBar: false,
				
				height: 100,
				
                //title: 'Düz Boyama (MT)',
                headerContainer: {
                    height: 30,
					//width: '100%',
                },
				itemHeight: 30,
				style: 'font-size: 11px;',
				
				//masked: false,
				
				masked: {xtype: 'loadmask', message: _lang_Yukleniyor},
				
                columns: [
					{
						text: 'Hafta',
						dataIndex: 'hafta',
						width: '40%',
						style: 'line-height: 30px;',
					},
					{
						text: 'Düz Boyama',
						dataIndex: 'duzboyama',
						width: '30%',
						style: 'line-height: 30px;',
					},
					{
						text: 'HT Boyama',
						dataIndex: 'htboyama',
						width: '30%',
						style: 'line-height: 30px;',
					}
				]
            }
			/*
			{
				flex: 1,
                xtype: 'list',
				itemTpl: '{hafta} {saten} {gabardin} {poplin} {diger}',
				store: 'DuzBoyamaMT_Store',
            }
			*/
        ]
    },
	
    initialize: function () {
		this.callParent();
		
		var task = Ext.create('Ext.util.DelayedTask', function() {
			Ext.Viewport.mask({xtype: 'loadmask', message: _lang_Yukleniyor});
			Ext.getStore('TerminGecikmeYuzdeleriHAFTALIK_Store').load(function(records, operation, success) {Ext.Viewport.unmask();}, this);
		}, this);

		task.delay(500);
    }
	
});
//</feature>
